<template>
  <div class="container mx-auto px-4 py-8 max-w-3xl">
    <h1 class="text-2xl text-red-600 text-center mb-8">让每一个祝福，都成为拉近距离的幸福桥梁。</h1>
    
    <div class="bg-white rounded-xl shadow-lg p-6 mb-8">
      <div class="mb-6">
        <h2 class="text-lg mb-4">选择类型</h2>
        <div class="flex flex-wrap gap-2">
          <button 
            v-for="category in categories" 
            :key="category"
            :class="['category-tag', { active: selectedCategory === category }]"
            @click="selectedCategory = category"
          >
            {{ category }}
          </button>
          <button 
            class="category-tag flex items-center gap-1"
            @click="showCustomCategoryDialog = true"
          >
            <PlusIcon class="w-5 h-5" /> 自定义
          </button>
        </div>
      </div>

      <div class="mb-6">
        <h2 class="text-lg mb-4">关键词 (可选)</h2>
        <input 
          type="text" 
          v-model="keywords"
          class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-primary"
          placeholder="写下你想说的美好心愿，生成暖心祝福～"
        >
      </div>

      <div class="flex gap-4">
        <button class="btn btn-primary flex-1" @click="generateBlessing">生成祝福</button>
        <button class="btn btn-secondary flex-1" @click="generateRandomBlessing">任意祝福</button>
      </div>
    </div>

    <div v-if="blessings.length > 0" class="space-y-4">
      <div v-for="(blessing, index) in blessings" :key="index" class="bg-white rounded-xl shadow p-6">
        <p class="text-gray-700 mb-4">{{ blessing.content }}</p>
        <div class="flex justify-end gap-4">
          <button class="text-gray-500 hover:text-primary" @click="shareBlessing(blessing)">
            <ShareIcon class="w-5 h-5" />
          </button>
          <button class="text-gray-500 hover:text-primary" @click="copyBlessing(blessing)">
            <ClipboardIcon class="w-5 h-5" />
          </button>
        </div>
        <div class="text-sm text-gray-500 mt-2">{{ blessing.timestamp }}</div>
      </div>
    </div>
  </div>

  <!-- Custom Category Dialog -->
  <TransitionRoot appear :show="showCustomCategoryDialog" as="template">
    <Dialog as="div" @close="showCustomCategoryDialog = false" class="relative z-10">
      <TransitionChild
        enter="duration-300 ease-out"
        enter-from="opacity-0"
        enter-to="opacity-100"
        leave="duration-200 ease-in"
        leave-from="opacity-100"
        leave-to="opacity-0"
      >
        <div class="fixed inset-0 bg-black bg-opacity-25" />
      </TransitionChild>

      <div class="fixed inset-0 overflow-y-auto">
        <div class="flex min-h-full items-center justify-center p-4">
          <TransitionChild
            enter="duration-300 ease-out"
            enter-from="opacity-0 scale-95"
            enter-to="opacity-100 scale-100"
            leave="duration-200 ease-in"
            leave-from="opacity-100 scale-100"
            leave-to="opacity-0 scale-95"
          >
            <DialogPanel class="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
              <DialogTitle as="h3" class="text-lg font-medium leading-6 text-gray-900">
                添加自定义类型
              </DialogTitle>

              <div class="mt-4">
                <input 
                  type="text" 
                  v-model="newCategory"
                  class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-primary"
                  placeholder="输入自定义类型名称"
                >
              </div>

              <div class="mt-4 flex justify-end gap-4">
                <button 
                  class="btn bg-gray-500 hover:bg-gray-600"
                  @click="showCustomCategoryDialog = false"
                >
                  取消
                </button>
                <button 
                  class="btn btn-primary"
                  @click="addCustomCategory"
                >
                  添加
                </button>
              </div>
            </DialogPanel>
          </TransitionChild>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>
</template>

<script setup>
import { ref } from 'vue'
import { Dialog, DialogPanel, DialogTitle, TransitionRoot, TransitionChild } from '@headlessui/vue'
import { PlusIcon, ShareIcon, ClipboardIcon } from '@heroicons/vue/24/outline'
import axios from 'axios'

const categories = ref(['春节', '元宵', '合作愉快', '开业', '结婚', '同学', '升学'])
const selectedCategory = ref('春节')
const keywords = ref('')
const blessings = ref([])
const showCustomCategoryDialog = ref(false)
const newCategory = ref('')

const generateBlessing = async () => {
  try {
    const response = await axios.post('http://localhost:8080/api/blessings/generate', {
      category: selectedCategory.value,
      keywords: keywords.value
    })
    
    blessings.value.unshift({
      content: response.data.blessing,
      timestamp: new Date().toLocaleString()
    })
  } catch (error) {
    console.error('Error generating blessing:', error)
  }
}

const generateRandomBlessing = async () => {
  try {
    const response = await axios.post('http://localhost:8080/api/blessings/random')
    blessings.value.unshift({
      content: response.data.blessing,
      timestamp: new Date().toLocaleString()
    })
  } catch (error) {
    console.error('Error generating random blessing:', error)
  }
}

const copyBlessing = async (blessing) => {
  try {
    await navigator.clipboard.writeText(blessing.content)
    alert('祝福语已复制到剪贴板')
  } catch (error) {
    console.error('Error copying blessing:', error)
  }
}

const shareBlessing = (blessing) => {
  if (navigator.share) {
    navigator.share({
      title: '分享祝福',
      text: blessing.content
    })
  } else {
    copyBlessing(blessing)
  }
}

const addCustomCategory = () => {
  if (newCategory.value.trim()) {
    categories.value.push(newCategory.value.trim())
    selectedCategory.value = newCategory.value.trim()
    newCategory.value = ''
    showCustomCategoryDialog.value = false
  }
}
</script>
